<template>
	<ui-sys bg="ui-BG" :footer="false">
		<ui-navbar back> </ui-navbar>
		<view class="p-5">
			<view class="text-xxl">
				<view class="text-bold py-2">欢迎登录CodeWord</view>
			</view>
			<view class="mt-5">
				<ui-tab v-model="tabCur" :tab="[ '登录']" tpl="long" dot="radius" textCur="text-lg" text="text-lg">
				</ui-tab>
			</view>
			<block v-if="tabCur == 0">
				<ui-form ui="ui-BG mt-4">
					<ui-form-group icon="cicon-mobile text-gray">
						<input :adjust-position="false"   v-model="login.phone" placeholder="手机号" type="number"></input>
					</ui-form-group>
					<ui-form-group icon="cicon-numcode text-gray">
						<input :adjust-position="false"   v-model="login.code" placeholder="验证码" type="number"></input>
						<block slot="action" v-if="isSendCode==true"><button class="ui-btn bg-blue-gradient"
								@tap="sendCode">发送验证码</button></block>
						<block slot="action" v-if="isSendCode==false"><button
								class="ui-btn bg-grey-thin df">{{timeRemaining+' s 重新发送' }}</button></block>

					</ui-form-group>
				</ui-form>
			</block>

			<view class="mt-5">
				<button class="ui-btn bg-blue-gradient radius lg block shadow-blue" @tap="loginSubmit"
					:disabled="isLoading">
					登录
					<text class="cicon-loading1 icon-spin ml-3" v-if="isLoading"></text>
				</button>
			</view>
			<view class="mt-4">
				<view class="text-center">未注册手机号自动注册</view>
			</view>
			<ui-fixed bottom>
				<view class="p-5">
					<view class="my-3">
						<view class="text-center">登陆代表已阅读并接受用户协议</view>
					</view>
					<ui-title title="其他登录方式" align="center" hasLine tpl="center-column"></ui-title>
					<button class="ui-btn bg-green-gradient radius lg block shadow-green">
						<text class="cicon-weixin icon-xl mr-3"></text>
						敬请期待
					</button>
				</view>
			</ui-fixed>
		</view>
	</ui-sys>
</template>

<script>
	import {
		sendCodeRequest,
		loginRequest,
		userInfoRequest
	} from '@/api/login.js';

	import {
		setStorageData,
		setStorageObjectData
	} from '@/utils/storageUtils.js';

	import {
		ACCESS_TOKEN_KEY,
		USER_INFO_KEY
	} from '@/config/storageKey.config';
	export default {
		data() {
			return {
				appstatus: {
					app_status: 1,
					app_reg: true
				},
				tabCur: 0,
				login: {
					phone: '18438830733',
					code: '6666'
				},
				// 是否显示发送验证码
				isSendCode: true,
				// 验证码剩余时间
				timeRemaining: 60,
				isLoading: false,
			};
		},
		methods: {
			loginSubmit() {
				if (this.login.phone == '') {
					this.$Tips('请输入手机号');
					return;
				}
				if (this.login.code == '') {
					this.$Tips('请输入验证码');
					return;
				}
				this.isLoading = true;
				setTimeout(() => {
					this.isLoading=false
				},10000);
				const params = {
					"cellPhone": this.login.phone,
					"verificationCode": this.login.code,
				}
				loginRequest(params).then(res => {
					if (res.code != 200) {
						this.$Tips(res.msg);
						this.isLoading = false;
						return
					}

					// 登陆成功
					this.$Tips("登陆成功");
					setStorageData(ACCESS_TOKEN_KEY, res.data.token)
					this.upUserInfo(res.data.uid)
					this.isLoading = false;
				})



			},

			// 发送验证码
			sendCode() {
				if (this.login.phone == '') {
					this.$Tips('请输入手机号');
					return;
				}
				const data = {
					"tel": this.login.phone,
					"type": 1314087
				}
				sendCodeRequest(data).then(res => {
					if (res.code != 200) {
						this.$Tips('发送失败请稍后重试');
						return
					}
					this.$Tips('发送成功 请注意查收');
					this.isSendCode = false
					var i = setInterval(() => {
						if (this.timeRemaining-- < 2) {
							clearInterval(i)
							this.timeRemaining = 60
							this.isSendCode = true
						}
					}, 1000)
				})
			},

			// 获取用户信息
			upUserInfo(uid) {
				const param = {
					'uid': uid
				}
				userInfoRequest(param).then(res => { 
					if (res.code == 200) {
						setStorageObjectData(USER_INFO_KEY, res.data)
						uni.reLaunch({
							url:'/pages/my/home'
						})
					}else{
						this.$Tips(res.msg);
					}
				})
			}
		}
	};
</script>

<style lang="scss">

</style>
